<template>
  <view class="goods-info">
    <image class="goods-pic" :src="goodsInfo.pic" mode="" />
    <view class="info-section">
      <view class="info-name">{{ goodsInfo.goods_name }}</view>
      <view class="info-sku">
        <view class="sku">{{ goodsInfo.attr | transAttr }}</view>
        <view class="num">x{{ goodsInfo.num }}</view>
      </view>
      <view class="info-price">
        <text>¥</text>
        <text>{{ goodsInfo.total_price | priceBeforeZero }}</text>
        <text>{{ goodsInfo.total_price | priceAfterZero }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: {},
    },
  },
  watch: {},
  data() {
    return {};
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
    transAttr(val) {
      if (typeof val == "string") {
        let attr = JSON.parse(val);
        
      }
    },
  },
  created() {},
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.goods-info {
  width: 100%;
  display: flex;
  align-items: flex-start;
  .goods-pic {
    width: 160rpx;
    height: 160rpx;
    background: #f2f2f2;
    border-radius: 10rpx;
  }
  .info-section {
    margin-left: 20rpx;
    flex: 1;
    .info-name {
      width: 100%;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    .info-sku {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
      .sku {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
      .num {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
    .info-price {
      margin-top: 14rpx;
      display: flex;
      align-items: baseline;
      text:nth-child(1) {
        font-size: 24rpx;
        color: #262626;
        font-family: PingFang SC;
        font-weight: 600;
      }
      text:nth-child(2) {
        font-size: 32rpx;
        color: #262626;
        font-family: PingFang SC;
        font-weight: 600;
      }
      text:nth-child(3) {
        font-size: 24rpx;
        color: #262626;
        font-family: PingFang SC;
        font-weight: 600;
      }
    }
  }
}
</style>
